<template>
  <div class="top_tab">
    <div
      class="top_tab_item"
      v-for="item in tabs"
      :key="item.id"
      :class="{ active: activeTab === item.id }"
      @click="emits('changeTab', item.id)"
    >
      {{ item.title }}
    </div>
  </div>
</template>

<script setup lang="ts">
const lang: any = getCurrentPageLang("ranking");
defineProps(["activeTab"]);
const emits = defineEmits(["changeTab"]);

const tabs = [
  {
    id: 1,
    title: lang.tab_title_1,
  },
  {
    id: 2,
    title: lang.tab_title_2,
  },
];
</script>

<style scoped lang="scss">
.top_tab {
  display: flex;
  width: 100%;
  height: 1.4rem;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 12;
}
.top_tab .top_tab_item {
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.38rem;
  position: relative;
  background: #312734;
  color: #8b6e8b;
}
.top_tab .active {
  background: #fd66b1;
  color: #fff;
  opacity: 1;
}
</style>
